<template>
	<view>
		
		<view class="flex_row_start_center publish_top">
			<input placeholder="增加标题会更受欢迎" :vlaue="form.title" maxlength="20" @input="getNUmber" class="publish_input" placeholder-class="placeholder" />
			<view class="publish_top_r">{{ number1 }}/20</view>
		</view>
		<view class="publish_text">
			<textarea class="publish_textarea" :value="form.content" maxlength="1000" @input="getNUmber2" placeholder-style="color:#b3b3b3" placeholder="我想分享..." :style="{height: photoList.length>0 ? '600rpx' : '1080rpx'}" />
	        <view class="publish_text_num">{{ number2 }}/1000</view>
		</view>
		<view class="publish_images flex_row_start_center" v-if="photoList && photoList.length>0" >
			<view v-for="(item,index) in photoList" :key="index"  class="publish_image">
				<image :src="item" mode="aspectFill" class="publish_image1"></image>
				<view class="closeempty_icon flex_row_center_center" @click="delImage(index)">
					<uni-icons type="closeempty" size="14" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="publish_image flex_row_center_center"  @click="getImage">
				<uni-icons type="plusempty" size="40" color="#d7d7d7"></uni-icons>
			</view>
		</view>
		<view class="publish_icon flex_row_start_center">
			<view @click="getImage">
				<uni-icons type="images" size="26" color="#4b4b4b"></uni-icons>
			</view>
			<!-- <view @click="getClose">
				<uni-icons type="bars"  size="24" color="#4b4b4b"></uni-icons>
			</view> -->
		</view>
		<view @click="submit" class="submit_box">
			发布
		</view>
		<uni-popup ref="popup" type="bottom"  >
			<view class="publish_popup">
				<view class="publish_popup_title">选择话题</view> 
				<scroll-view  scroll-y="true" class="scroll-Y  ">
					<view v-for="(iten,index) in 20" :key="index">
						<view class="publish_popup_list flex_row_between_center">
							<view class="publish_list_l flex_row_start_center">
								<view v-if="index==0" style="color: #ee917b;">{{index+1}}</view>
								<view v-else-if="index==1" style="color: #eeaf88;">{{index+1}}</view>
								<view v-else-if="index==2" style="color: #efc594;">{{index+1}}</view>
								<view v-else style="color: #f6e1ca;">{{index+1}}</view>
								<image class="publish_list_l_image" mode="aspectFill" src="https://img0.baidu.com/it/u=1102946699,302723441&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></image>
								<view>不同的mbit进阶指南</view>
							</view>
							<view class="publish_list_r">
								<uni-icons type="fire-filled" size="16" color="#f8a197"></uni-icons>
								<text>20W+</text>
							</view>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from '@/config'
	export default{
		data(){
			return{
				form:{
					title:'',
					type:"0",
					postType:'1',
					content:'',
					picture:''
				},
				number1:0,
				number2:0,
				photoList:[],
				currentIndex:''
			}
		},
		onLoad(options){
			console.log(options);
			this.form.postType=options.params
			this.currentIndex=options.params
		},
		onShow(){
			// this.open()
			// console.log(uni.getStorageSync('userInfo').access_token);
		},
		methods:{
			 open(){
			    this.$refs.popup.open()
			},
			getNUmber(e){
				console.log(e);
				this.form.title=e.detail.value
				this.number1=e.detail.value.length
			},
			getNUmber2(e){
				console.log(e);
				this.form.content=e.detail.value
				this.number2=e.detail.value.length
			},
			getImage(){
				// 从相册选择6张图
				if(this.photoList.length>=9){
					this.$modal.msg('请不要选择图片超过9张！')
					return false
				}
				let _this=this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						console.log('res',res);
						res.tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: config.baseUrl + 'v3/oss/front/upload', //上传的服务器地址
								//filePath: res.tempFilePaths[0],//2.上传单图
								filePath: item,//多图
								name: 'file',
								formData: {
								  source: 'headImg'
								},
								header: {
									['Authorization']: "Bearer " + uni.getStorageSync('userInfo').access_token,
								},
								success: (uploadFileRes) => {
									// console.log(JSON.parse(uploadFileRes.data).data.url);
									let uploadUrl = JSON.parse(uploadFileRes.data).data.url;
									// console.log(uploadUrl);
									_this.photoList.push(uploadUrl);//收集返回的图片
									
								}
							})
						})
					}
			    })
					

			},
			submit(){
				
				if(!this.form.content  ){
					this.$modal.msg('请填写内容！！！')
					return false
				}
				
				let param = {}
				this.form.picture=this.photoList.join(',')
				param.url = 'v3/discuss/front/add'
				param.data = this.form
				param.method = 'POST'
				param.header={
					'Content-Type':'application/json'
				}
				console.log(this.form);
				this.$request(param).then(res=>{
					console.log('res',res);
					if(res.state==200){
						this.$modal.msg('发布成功')
						this.getClose()


					}else{
						this.$modal.msg('发布失败')
					}
				})
			},
			getClose(){
				let _this=this
				var pages = getCurrentPages(); // 获取当前挂载的路由数组
				var prePage = pages[pages.length - 2] //获取 上一个页面
				
				uni.navigateBack({
					success() {
							prePage.$vm.goCurrent(_this.currentIndex) // 当返回成功的时候调用上一级页面的回调
				     }
				})

			},
			delImage(index){
				console.log(index);
				this.photoList.splice(index, 1)
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	
	.publish_top{
		border-bottom: 2rpx solid #f4f4f4;
	}
	.placeholder{
		font-size: 26rpx;
	}
	.publish_images{
		padding: 10rpx 20rpx;
		 flex-wrap: wrap; //  wrap（向下换）
	}
	.publish_image{
		width: 230rpx;
		height: 230rpx;
		margin-right: 10rpx;
		background-color: #f7f7f7;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		position: relative;
	}
	.closeempty_icon{
		position: absolute;
		right: -10rpx;
		top:-10rpx;
		background-color: #cdcdcd !important;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
	}
	.publish_image1{
		width: 100%;
		height: 100%;
	}
	.publish_image:nth-child(3n){
		margin-right: 0;
	}
	.publish_input{
		// background-color: red;
		height: 79rpx;
		padding-left: 24rpx;
		width: 660rpx;
		font-size: 26rpx;
	}
	.publish_top_r{
		color: #bebebe;
		font-size: 28rpx;
	}
	.publish_text{
		position: relative;
	}
	.publish_text_num{
		position: absolute;
		right: 15rpx;
		bottom: 10rpx;
		color: #c8c8c8;
		background-color: #fff;
		padding: 10rpx 12rpx;
	}
	.publish_textarea{
		width: 750rpx;
		height: 1080rpx;
		font-size: 26rpx;
		padding:24rpx 10rpx 10rpx 20rpx;
		// background-color: red;
	}
	.publish_icon{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx; 
		height: 77rpx;
		border-top: 2rpx solid #f6f6f6;
		z-index: 99;
		background-color:#fff;
		& view{
			padding: 12rpx 24rpx;
			border-right: 2rpx solid #f6f6f6;
		}
	}
	.publish_popup{
		// min-height: 300rpx;
		// max-height: 1000rpx;
		height: 1000rpx;
		border-radius:10px 10px 0 0;
		background-color: #fff;
		padding: 24rpx;
		
	}
	.publish_popup_title{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}
	.scroll-Y{
		// background-color: red;
		height: 900rpx;
	}
	.publish_popup_list{
		padding: 8rpx 0;
		border-bottom: 2rpx solid #f3f3f3;
	}
	.publish_list_l{
		font-size: 28rpx;
	}
	.publish_list_l_image{
		width: 70rpx;
		height: 70rpx;
		border-radius: 20rpx;
		margin: 0 24rpx 0 18rpx;
	}
	.publish_list_r{
		color: #f8a197;
		font-size: 24rpx;
	}
	
	.submit_box{
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		background-color: #62d4ef;
		color: #fff;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
	}
</style>